<template>
  <div class="blog-write">
    <div class="header">
      <NavIndex></NavIndex>
    </div>
    <div class="content-container">
      <div class="blog-form">
        <div class="input-group">
          <input v-model="title" type="text" placeholder="请输入博客标题" class="title-input" />
          <div class="tags-container">
            <el-select v-model="selectedTags" multiple placeholder="选择标签" class="tag-select">
              <el-option v-for="tag in tags" :key="tag" :label="tag" :value="tag" />
            </el-select>
          </div>
        </div>
        <Editor :value="value" :plugins="plugins" @change="handleChange" class="editor" />
        <div class="button-group">
          <el-button type="primary" @click="submitBlog" :loading="submitting">发布博客</el-button>
          <el-button @click="saveDraft">保存草稿</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import 'bytemd/dist/index.css'
import NavIndex from "@/components/topNav/topNavIndex.vue";
import gfm from '@bytemd/plugin-gfm'
import { Editor, Viewer } from '@bytemd/vue-next'
import { ElMessage } from 'element-plus'

const plugins = [
  gfm(),
  // Add more plugins here
]

export default {
  components: { Editor, NavIndex },
  data() {
    return {
      value: '',
      plugins,
      title: '',
      selectedTags: [],
      submitting: false,
      tags: ['技术', '生活', '学习', '随笔', '其他']
    }
  },
  methods: {
    handleChange(v) {
      this.value = v
    },
    async submitBlog() {
      if (!this.title.trim()) {
        ElMessage.warning('请输入博客标题')
        return
      }
      if (!this.value.trim()) {
        ElMessage.warning('请输入博客内容')
        return
      }
      if (this.selectedTags.length === 0) {
        ElMessage.warning('请至少选择一个标签')
        return
      }
      this.submitting = true
      try {
        // TODO: 实现博客提交逻辑
        ElMessage.success('博客发布成功')
      } catch (error) {
        ElMessage.error('发布失败，请重试')
      } finally {
        this.submitting = false
      }
    },
    saveDraft() {
      // TODO: 实现保存草稿逻辑
      ElMessage.success('草稿保存成功')
    }
  }
}
  </script>
  <style scoped>
.blog-write {
  min-height: 100vh;
  background: linear-gradient(to right, rgb(10, 2, 13), rgb(51, 45, 53));
}

.header {
  width: 100%;
  height: 70px;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.blog-form {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.input-group {
  margin-bottom: 20px;
}

.title-input {
  width: 100%;
  padding: 12px;
  font-size: 1.2em;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  margin-bottom: 15px;
}

.title-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.tags-container {
  margin-bottom: 15px;
}

.tag-select {
  width: 100%;
}

.editor {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  min-height: 500px;
}

.button-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

</style>